<template>
  <Header :title="title" :is_img="1"></Header>
  <div class="rele-wrap">
    <div class="has-bottom">
      <swiper
        :modules="modules"
        :loop="true"
        :pagination="swiper_options.pagination"
        :autoplay="swiper_options.autoplay"
        class="swiper"
      >
        <swiper-slide v-for="(item, index) in shop.img_arr" :key="index">
          <img :src="item" alt="" class="active" />
        </swiper-slide>
      </swiper>
      <div class="idle-panel">
        <div class="p1">
          {{ shop.title }}
        </div>
        <div class="p2">
          <text class="span">{{ shop.price }}</text>
        </div>
      </div>
      <div class="sale-panel">
        <div class="tit">商品详情</div>
        <div class="all open">
          <img
            :src="item"
            v-for="(item, index) in shop.info_arr"
            :key="index"
          />
        </div>
      </div>
    </div>
    <div class="fui-navbar bottom-buttons">
      <button class="btn btn_left" @click="add()">加入购物车</button>
      <button class="btn btn_right" @click="buy(shop.id)">立即购买</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import Header from "../../components/Header.vue";

import SwiperCore, { Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
SwiperCore.use([Autoplay, Pagination]);

import { GoodsDetails, AddCart } from "../../network/index.js";

export default {
  components: {
    Swiper,
    SwiperSlide,
    Header,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    const swiper_options = new reactive({
      pagination: {
        clickable: true,
      },
      autoplay: {
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 2000, //2秒切换一次
        pauseOnMouseEnter: true,
      },
      speed: 500, //切换过渡速度
    });

    const data = new reactive({
      shop: [],
      uid: 0,
    });

    GoodsDetails(route.query).then((e) => {
      data.shop = e;
    });

    const add = () => {
      if (!localStorage.getItem("token")) {
        router.push("/login");
        return;
      }
      AddCart({ sid: route.query.id, type: "add" }).then((e) => {
        console.log("e", e);
        alert("加入购物车成功");
      });
    };

    const buy = (id) => {
      router.push(`/cart_order?id=${id}&type=1`);
    };

    return {
      swiper_options,
      buy,
      title: "详情",
      ...toRefs(data),
      add,
    };
  },
};
</script>
<style scoped>
.swiper {
  margin: 0 0.1rem;
}
.swiper .swiper-wrapper {
  /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  height: 1.5rem;
  border-radius: 0.1rem;
}
.swiper .swiper-wrapper img {
  height: 100%;
  width: 100%;
  border-radius: 0.1rem;
}
.swiper {
  --swiper-pagination-color: #fff;
  --swiper-navigation-color: black;
}
.rele-wrap {
  background: #f5f5f5;
}
.has-bottom {
  padding-bottom: 55px !important;
}
.banner {
  position: relative;
  background: #fff;
  overflow: hidden;
  margin: 0;
  visibility: visible;
  height: 315px;
}
.banner .swipe-wrap {
  overflow: hidden;
  position: relative;
}
.vi_img {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.idle-panel {
  padding: 1px 12px 12px 12px;
  background: #fff;
  padding-left: 12px;
  margin-top: 0;
}
.p1 {
  font-weight: normal;
  line-height: 22px;
  padding-bottom: 0;
  color: #222;
  padding: 15px 10px 8px 0;
  font-size: 100%;
  position: relative;
}
.p2 {
  height: 20px;
  padding-top: 2px;
  padding-right: 10px;
  color: #222;
}
.p2 .span {
  font-size: 16px;
  line-height: 20px;
  color: #ff3600;
  float: right;
}
.sale-panel {
  margin-top: 10px;
  background: #fff;
  padding: 1px 12px 12px 12px;
}
.tit {
  letter-spacing: 1px;
  color: #666;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  padding-left: 12px;
  position: relative;
  margin: 15px 0 0;
}
.tit::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background: #56b244;
  left: 5px;
  top: 0;
}
.open {
  height: auto;
  text-overflow: inherit;
  -webkit-line-clamp: 100000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 22px;
  margin-top: 13px;
  font-size: 14px;
  color: #333;
  position: relative;
}
.open img {
  width: 100%;
}
/* 底部按钮 */
.fui-navbar {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 2;
}
.btn {
  border: none;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 0;
  width: 50%;
  height: 49px;
}
.btn_left {
  background: #fe9402;
  float: left;
}
.btn_right {
  float: right;
  background: #fd5555;
}
</style>